<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="header/h5header::h5header('忘记密码','assets/layui/css/layui.css,/assets/module/admin.css','')">
</head>

<body>
<!-- 正文 -->
<div class="Headline">
    <div class="passLogin">
        <div class="passLogin-cont">
            <div class="passLogin-logo">
                <img src="/assets/H5/images/logo02.png" alt=""/>
            </div>
            <div class="passLogin-info layui-form">
                <!--账号-->
                <div class="passLogin-infoM">
                    <i class="iconfont">&#xe7d0;</i>
                    <input type="tel" class="passLogin-infoM-input" id="phonenumber" name="phonenumber" placeholder="请输入手机号"
                    	lay-vertype="tips" lay-verify="phone" />
                </div>
                <!--验证码-->
                <div class="passLogin-infoB passLogin-infoW">
                    <div class="passLogin-infoB1">
                        <i class="iconfont">&#xe7c6;</i>
                        <input type="text" class="passLogin-infoCode" name="code" placeholder="请输入4位验证码" maxlength="4"
                        	lay-vertype="tips" lay-verify="required"/>
                    </div>
                    <div class="passLogin-infoB2">
                        <button type="button" class="passLogin-infoBtn" id="newForgotCode" lay-event="newForgotCode">获取验证码</button>
                    </div>
                </div>
                <!--密码-->
                <div class="passLogin-infoM">
                    <i class="iconfont">&#xe6ab;</i>
                    <input type="password" id="newpwd" class="passLogin-infoM-input" placeholder="密码必须6到16位，且不能出现空格" maxlength="16" name="newpassword"
                    	 lay-vertype="tips" lay-verify="required" lay-reqText="请设置密码" />
                </div>
                <div class="passLogin-infoM">
                    <i class="iconfont">&#xe6ab;</i>
                    <input type="password" class="passLogin-infoM-input" placeholder="请再次输入密码" 
                    	lay-vertype="tips" lay-verify="equalTo" lay-equalto="#newpwd" lay-equaltotext="两次输入密码不一致">
                </div>
                <!--确认-->
                <div class="passLogin-infoM passLogin-infoY">
                    <button class="passLogin-infoM-input" id="forgetPwdSubmit" lay-submit lay-filter="forgetPwdSubmit">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
layui.use(['layer', 'form', 'formX', 'setter', 'mynotice', 'admin', 'ax', 'util', 'notice'], function () {
	var $ = layui.jquery;
	var layer = layui.layer;
	var form = layui.form;
	var formX = layui.formX;
	var setter = layui.setter;
	var mynotice = layui.mynotice;
	var admin = layui.admin;
	var $ax = layui.ax;
	var util = layui.util;
	
	var pattern = /^1(3|4|5|7|8)\d{9}$/;
	var uuid = '';
	
	form.on('submit(forgetPwdSubmit)', function(data){
    	admin.btnLoading('#forgetPwdSubmit', '提交中...'); 
    	var ajax = new $ax("/user/newforgot", 'post', function (res) {
    		admin.btnLoading('#forgetPwdSubmit', false);
        	$('#forgetPwdSubmit').attr('disabled', false)
            $("[name='username']").val(data.field.phonenumber);
        	location.replace('/login');
        }, function (res) {
        	admin.btnLoading('#forgetPwdSubmit', false);
        	$('#forgetPwdSubmit').attr('disabled', false)
        	layer.msg(res.msg);
        });
    	data.field.uuid = uuid;
    	ajax.setData(JSON.stringify(data.field));
        ajax.start();
    	return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
	
	util.event('lay-event', {
		newForgotCode: () => { // 获取验证码
        	var phone = $('#phonenumber').val();
        	if(phone == ''){
        		layer.msg('请输入手机号');
            	return false;
        	}
        	if(!pattern.test(phone)){
        		layer.msg('手机号码格式不正确');
            	return false;
        	}
        	admin.btnLoading('#newForgotCode'); 
        	var ajax = new $ax("/newforgot/sms", 'get', function (res) {
        		uuid = res.data;
        		admin.btnLoading('#newForgotCode', false);
        		formX.startTimer('#newForgotCode', 30, function(time){
        			if(time == 1){
        				$('#newForgotCode').attr('disabled', false)
        			}
        			return time + 's';
                });
            }, function (res) {
            	admin.btnLoading('#newForgotCode', false);
            	$('#newForgotCode').attr('disabled', false)
            	layer.msg(res.msg);
            });
        	ajax.set('phone', phone);
            ajax.start();
        },
	})
	
});
</script>

</body>
</html>